<template>
    <div class="content" :style="{height: height +'px'}">
        <div class="headTitle">
            <div class="head"></div>
            <div class="title">社团管理系统</div>
        </div>
        <div class="list">
            <div class="one" v-for="(item,index) in show" :key="index">
                <div>{{ item }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    data(){
        return{
            show:'',
            common:["社团活动报名","社团申请","意见投诉箱","修改个人信息","费用记录管理"],
            middleRank:["社团信息管理","社团成员管理","社团报名管理","活动发布公告","费用记录管理"],
            super:["社团管理","社长管理","社长主页","社员主页","费用记录管理"],
            height:window.innerHeight-17
        }
    },
    created(){
        this.show=this.common
    }
}
</script>

<style scoped>
.content{
    width: 353px;
    background: #fff;
    border-right: 1px black solid;
}
.headTitle{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.head{
    width: 63px;
    height: 63px;
    border-radius: 50%;
    background: #BBBBBB;
}
.title{
    font-size: 28px;
    color: #101010;
    margin-left: 5px;
}
.list{
    margin-top: 85px;
    display: flex;
    height: calc(100% - 300px);
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.one{
    width: 191px;
    height: 40px;
    background: #BBBBBB;
    color: white;
    text-align: center;
    line-height: 40px;
}
</style>